<template>
  <div>
    <h1>微博</h1>
    <div class="common">
      <el-container>
        <el-main>
          <div style="margin-bottom: 38px;" v-for="item in data" :key="item.id">

            <!-- 头像/昵称 -->
            <div class="avatar">
              <el-avatar shape="square" :size="80" :src="item.avatar" />
              <div class="info">
                <strong>{{ item.name }}</strong>
                <div>{{ item.date }}</div>
              </div>

            </div>
            <!-- 正文 -->
            <div class="content">
              {{ item.content }}</div>
            <!-- 图片 -->
            <div class="images">

              <img v-for="(image, index) in item.images" :key="image" :src="image" class="image" />

            </div>
            <!-- 底部 -->
            <div>
              <el-row :gutter="20">
                <el-col :span="6"><el-icon><i-ep-share /></el-icon>分享{{ item.shares }}</el-col>
                <el-col :span="6"><el-icon><i-ep-comment /></el-icon>评论{{ item.comments }}</el-col>
                <el-col style="cursor: pointer;" @click="liked(item._id)"
                  :span="6"><el-icon><i-ep-star-filled /></el-icon>点赞{{ item.likes }}</el-col>
              </el-row>
            </div>
            <br>
            <hr>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "weibo",
  data() {
    return {
      data: [],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    };
  },
  methods: {
    list() {
      this.$http.get(" /v1/test/getWeiboList").then(res => {
        this.data = res.data;
        console.log(this.data);
      });
    },
    liked(id) {
      this.$http.post("/v1/test/like", {
        id: id
      }).then(res => {
        this.data = this.data.map(item=> {
          if (item._id == id) {
            return res.data;
          } else {
            return item;
          }
        })
      })
    }
  },
  created() {
    this.list();
  }
};
</script>

<style>
.common {
  width: 650px;
  margin: 0 auto;
}

.avatar {
  display: flex;

  margin-bottom: 10px;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
  text-align: left;
}

.content {
  background: #dedfe0;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  width: 600px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
  width: 630px;
}

.image {
  width: 200px;
  margin: 5px 10px 0 0;


}
</style>